<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link type="text/css" href="../ol5.3.0/ol.css" rel="stylesheet"/>
    <script type="text/javascript" src="../ol5.3.0/ol.js" charset="utf-8"></script>
    <style>
        .ol-zoomslider{top:7.5em;background: red;}
    </style>
</head>
<body>
    <div id="map"></div>
    <script>
        const gaode = new ol.layer.Tile({
            title: "高德地图",
            source: new ol.source.XYZ({
                url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}',
                wrapX: false 
            })
        })
        const map = new ol.Map({
            layers: [gaode],
            view: new ol.View({
                center: [103.23, 35.33], //地图初始中心点
                projection: 'EPSG:4326',
                zoom: 4,
                minZoom: 1
            }),
            target: 'map'
        })

        // 视图跳转控件 , 显示某个范围
        const ZoomToExtent = new ol.control.ZoomToExtent({
            extent: [110,30,160,30]   // 范围
        })
        map.addControl(ZoomToExtent)

        // 放大缩小条形控件
        const zoomslider = new ol.control.ZoomSlider();
        map.addControl(zoomslider)

        //添加点==========================================================
        addPoint()
        function addPoint(){
            //1、通过样式信息和几何信息构建点要素 
            /* 几何 */
            const point = new ol.Feature({geometry:new ol.geom.Point([114.30,30.50])})
            let style = new ol.style.Style({
                /* image属性设置点要素的样式 */
                image: new ol.style.Circle({
                    /* radius设置点的半径 单位degree */
                    radius:10,
                    fill:new ol.style.Fill({
                        color:"#ff2d51"
                    }),
                    stroke:new ol.style.Stroke({
                        width:4,
                        color:"#333"
                    }),
                })
            })
            point.setStyle(style)

            /* 2、将要素添加到矢量数据源 */
            let source = new ol.source.Vector({
                features:[point]
            })
            /* 3、将矢量数据源添加到矢量图层 */
            let layer = new ol.layer.Vector({
                source
            })
            /* 4、添加矢量图层到地图容器 */
            map.addLayer(layer)
        }
        //geojson数据==========================================================
        geojsonFunction()
        function geojsonFunction(){
            let data = {
                type:"FeatureCollection",   //固定写法
                features:[
                    {
                        type:"Feature",   //固定写法
                        geometry:{
                            type:"Point",   //类型: 点数据
                            coordinates:[116.30,32.50]  //坐标
                        }
                    }
                ]
            } 
            let source = new ol.source.Vector({
                features:new ol.format.GeoJSON().readFeatures(data)
            }) 
            let layer = new ol.layer.Vector({
                source
            }) 
            let style = new ol.style.Style({ 
                image: new ol.style.Circle({ 
                    radius:10,
                    fill:new ol.style.Fill({
                        color:"#168cfa"
                    }),
                    stroke:new ol.style.Stroke({
                        width:4,
                        color:"#333"
                    }),
                })
            })
            layer.setStyle(style)
            map.addLayer(layer)
        }
        //geojson数据===线条==区域=====================================================
        lineFunction()
        function lineFunction(){
            let data = {
                type:"FeatureCollection",   //固定写法
                features:[
                    {
                        type:"Feature",   //固定写法
                        geometry:{
                            type:"LineString",   //类型: 线数据
                            coordinates: [
                                [114.30,30.50],
                                [114,32.50]
                            ]
                        }
                    },
                    {
                        type:"Feature",   //固定写法
                        geometry:{
                            type:"Polygon",   //类型: 区域数据
                            coordinates: [
                                [       //可能设多个 区域
                                    [114.30,30.50],
                                    [116,30.50],
                                    [116,30]
                                ]
                            ]
                        }
                    }
                ]
            } 
            let source = new ol.source.Vector({
                features:new ol.format.GeoJSON().readFeatures(data)
            }) 
            let layer = new ol.layer.Vector({
                source
            }) 
            let style = new ol.style.Style({  
                stroke:new ol.style.Stroke({
                    width:4,
                    color:"#333"
                }), 
                fill:new ol.style.Fill({
                    color:"rgbg(50,50,50,0.3)"
                })
            })
            layer.setStyle(style)
            map.addLayer(layer)
        }
    </script>
</body>
</html>